<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件和事件流</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #ff0000;
        }
        #content{
            width: 100px;
            height: 100px;
            background-color: #0000ff;
        }
    </style>
</head>
<body>
<div>
<!--    <button onclick="console.log('1234')">按钮</button>-->
    <div id="box">
        <p id="content">内容</p>

    </div>
    <h2>----------事件委托------------</h2>
    <div>
        <ul id="ul">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <button id="btn">添加</button>
    </div>
</div>
<script>
    //DOM三级事件
    //DOM0事件 <button onclick="console.log('1234')">按钮</button>
    //DOM2事件 addEventListener onclick
    //DOM3事件 onKeyDown onKeyUp

    // 事件流
    //事件冒泡和事件捕获
    // box.addEventListener(事件类型,触发事件之后的回调函数,触发阶段(布尔值默认false表示冒泡阶段触发))

    //冒泡阶段
    //content_click
    //box_click
    let box = document.getElementById("box");
    let content = document.getElementById("content");
    content.addEventListener("click",(e)=>{
        console.log("content_click",true)
    },true)
    box.addEventListener("click",(e)=>{
        console.log("box_click",true)
    },true);
    content.addEventListener("click",(e)=>{
        e.stopPropagation();//阻止事件冒泡传播
        e.preventDefault();//阻止默认事件
        console.log("content_click",false)
    },false)
    box.addEventListener("click",(e)=>{
        console.log("box_click",false)
    },false);

//    事件委托: 事件委托，会把⼀个或者⼀组元素的事件委托到它的⽗层或者更外层元素上，真正绑定事件的是外层元
//     素，⽽不是⽬标元素.当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元素上去执⾏函数

    var liList = document.getElementsByTagName("li");
    let ul = document.getElementById("ul");
    let btn = document.getElementById("btn");

    // for (let i = 0; i < liList.length; i++) {
    //     liList[i].addEventListener("click",(e)=>{
    //         console.log(e,i);
    //     },false)
    // }
    ul.addEventListener("click",(e)=>{
        console.log(e.target)
    },false)


    btn.addEventListener("click", ()=>{
        let li = document.createElement("li");
        li.innerText = "新增加的";
        ul.appendChild(li)
    })


</script>
</body>
</html>